<div class="login-container">
  <div class="content">
    <div class="top-container">
      <a routerLink="/dashboard" title="中能化地勘平台">
        <img src="/assets/images/logo.png" alt="中能化地勘平台">
        <span>中能化地勘平台</span>
      </a>
    </div>
    <div class="main-container">
      <form nz-form [formGroup]="loginForm" class="login-form" (ngSubmit)="onSubmit()">
        <div class="form-title">登录</div>
        <div nz-form-item>
          <div nz-form-control>
            <nz-input formControlName="username" [nzPlaceHolder]="'用户名'" [nzSize]="'large'">
              <ng-template #prefix>
                <i class="anticon anticon-user"></i>
              </ng-template>
            </nz-input>
            <div nz-form-explain 
            *ngIf="loginForm.controls.username.dirty 
            && (loginForm.controls.username.hasError('required') || loginForm.controls.username.hasError('pattern'))">{{formErrors['username']}}</div>
          </div>
        </div>
        <div nz-form-item>
          <div nz-form-control>
            <nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'密码'" [nzSize]="'large'">
              <ng-template #prefix>
                <i class="anticon anticon-lock"></i>
              </ng-template>
            </nz-input>
            <div nz-form-explain 
            *ngIf="loginForm.controls.password.dirty
            && (loginForm.controls.password.hasError('required') || loginForm.controls.password.hasError('pattern'))">{{formErrors['password']}}</div>
          </div>
        </div>
        <div nz-form-item>
          <div nz-form-control>
            <label nz-checkbox formControlName="remember">
              <span>自动登录</span>
            </label>
            <a class="login-form-forgot" class="login-form-forgot" routerLink="/reset/password">忘记密码</a>
            <button nz-button class="login-form-button" [nzType]="'primary'" [nzSize]="'large'" [nzLoading]="loginLoading" type="submit">{{loginBtnText}}</button>
            <span class="login-form-to-register">
                没有账号？点击这里
                <a routerLink="/register">马上注册!</a>
            </span>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="footer">
    <div class="copyright">Copyright © 2018 中能化安信信息技术有限公司版权所有</div>
  </div>
</div>